<template>
  <div
    v-if="node.type == 'start'"
    :id="node.id"
    class="common-circle-node"
    :class="{ active: isActive() }"
    :style="{
      top: node.y + 'px',
      left: node.x + 'px',
      cursor:
        currentTool.type == 'drag'
          ? 'move'
          : currentTool.type == 'connScene'
          ? 'crosshair': currentTool.type == 'connSuccess'
          ? 'crosshair': currentTool.type == 'connFail'
          ? 'crosshair': currentTool.type == 'connOvertime'
          ? 'crosshair': currentTool.type == 'zoom-in'
          ? 'zoom-in'
          : currentTool.type == 'zoom-out'
          ? 'zoom-out'
          : 'default',
    }"
    @click.stop="selectNode"
    @contextmenu.stop="showNodeContextMenu"
  >
    {{ node.nodeName }}
  </div>

  <div
    v-else-if="node.type == 'end'"
    :id="node.id"
    class="common-circle-node"
    :class="{ active: isActive() }"
    :style="{
      top: node.y + 'px',
      left: node.x + 'px',
      cursor:
        currentTool.type == 'drag'
          ? 'move'
          : currentTool.type == 'connScene'
          ? 'crosshair' : currentTool.type == 'connSuccess'
          ? 'crosshair' : currentTool.type == 'connFail'
          ? 'crosshair' : currentTool.type == 'connOvertime'
          ? 'crosshair'
          : currentTool.type == 'zoom-in'
          ? 'zoom-in'
          : currentTool.type == 'zoom-out'
          ? 'zoom-out'
          : 'default',
    }"
    @click.stop="selectNode"
    @contextmenu.stop="showNodeContextMenu"
  >
    {{ node.nodeName }}
  </div>

  <div
    v-else-if="node.type == 'common'"
    :id="node.id"
    class="common-rectangle-node commonNode"
    :class="{ active: isActive() }"
    :style="{
      top: node.y + 'px',
      left: node.x + 'px',
      cursor:
        currentTool.type == 'drag'
          ? 'move'
          : currentTool.type == 'connScene'
          ? 'crosshair' : currentTool.type == 'connSuccess'
          ? 'crosshair' : currentTool.type == 'connFail'
          ? 'crosshair' : currentTool.type == 'connOvertime'
          ? 'crosshair'
          : currentTool.type == 'zoom-in'
          ? 'zoom-in'
          : currentTool.type == 'zoom-out'
          ? 'zoom-out'
          : 'default',
          backgroundColor: '#1E90FF',
          color: 'white'
    }"
    @dblclick.stop="selectNode"
    @contextmenu.stop="showNodeContextMenu"
  >
  <a-tooltip placement="topLeft" :title="node.nodeName" arrow-point-at-center>
    {{ node.nodeName }}
  </a-tooltip>
  </div>

  <div
    v-else-if="node.type == 'freedom'"
    :id="node.id"
    class="common-rectangle-node"
    :class="{ active: isActive() }"
    :style="{
      top: node.y + 'px',
      left: node.x + 'px',
      cursor:
        currentTool.type == 'drag'
          ? 'move'
          : currentTool.type == 'connScene'
          ? 'crosshair': currentTool.type == 'connSuccess'
          ? 'crosshair': currentTool.type == 'connFail'
          ? 'crosshair': currentTool.type == 'connOvertime'
          ? 'crosshair'
          : currentTool.type == 'zoom-in'
          ? 'zoom-in'
          : currentTool.type == 'zoom-out'
          ? 'zoom-out'
          : 'default',
          backgroundColor: node.icon === 'start'?'#FF8C00':'#f4f6fc',
      color: node.icon === 'start'?'white':'black'
    }"
    @click.stop="selectNode"
    @contextmenu.stop="showNodeContextMenu"
  >
    {{ node.nodeName }}
  </div>

  <div
    v-else-if="node.type == 'event'"
    :id="node.id"
    class="common-circle-node"
    :class="{ active: isActive() }"
    :style="{
      top: node.y + 'px',
      left: node.x + 'px',
      cursor:
        currentTool.type == 'drag'
          ? 'move'
          : currentTool.type == 'connScene'
          ? 'crosshair' : currentTool.type == 'connSuccess'
          ? 'crosshair' : currentTool.type == 'connFail'
          ? 'crosshair' : currentTool.type == 'connOvertime'
          ? 'crosshair'
          : currentTool.type == 'zoom-in'
          ? 'zoom-in'
          : currentTool.type == 'zoom-out'
          ? 'zoom-out'
          : 'default',
    }"
    @click.stop="selectNode"
    @contextmenu.stop="showNodeContextMenu"
  >
    {{ node.nodeName }}
  </div>

  <div
    v-else-if="node.type == 'gateway'"
    :id="node.id"
    class="common-diamond-node"
    :class="{ active: isActive() }"
    :style="{
      top: node.y + 'px',
      left: node.x + 'px',
      cursor:
        currentTool.type == 'drag'
          ? 'move'
          : currentTool.type == 'connScene'
          ? 'crosshair' : currentTool.type == 'connSuccess'
          ? 'crosshair' : currentTool.type == 'connFail'
          ? 'crosshair' : currentTool.type == 'connOvertime'
          ? 'crosshair'
          : currentTool.type == 'zoom'
          ? 'zoom-in'
          : currentTool.type == 'zoom-out'
          ? 'zoom-out'
          : 'default',
    }"
    @click.stop="selectNode"
    @contextmenu.stop="showNodeContextMenu"
  ></div>

  <div
    v-else-if="node.type == 'child-flow'"
    :id="node.id"
    class="common-rectangle-node"
    :class="{ active: isActive() }"
    :style="{
      top: node.y + 'px',
      left: node.x + 'px',
      cursor:
        currentTool.type == 'drag'
          ? 'move'
          : currentTool.type == 'connScene'
          ? 'crosshair' : currentTool.type == 'connSuccess'
          ? 'crosshair' : currentTool.type == 'connFail'
          ? 'crosshair' : currentTool.type == 'connOvertime'
          ? 'crosshair'
          : currentTool.type == 'zoom-in'
          ? 'zoom-in'
          : currentTool.type == 'zoom-out'
          ? 'zoom-out'
          : 'default',
    }"
    @click.stop="selectNode"
    @contextmenu.stop="showNodeContextMenu"
  >
    <a-icon type="api" class="node-icon" />
    {{ node.nodeName }}
  </div>

  <div
    v-else-if="node.type == 'x-lane'"
    :id="node.id"
    class="common-x-lane-node"
    :class="{ active: isActive() }"
    :style="{
      top: node.y + 'px',
      left: node.x + 'px',
      height: node.height + 'px',
      width: node.width + 'px',
      cursor:
        currentTool.type == 'zoom-in'
          ? 'zoom-in'
          : currentTool.type == 'zoom-out'
          ? 'zoom-out'
          : 'default',
    }"
  >
    <div
      class="lane-text-div"
      :style="{ cursor: currentTool.type == 'drag' ? 'move' : 'default' }"
      @click.stop="selectNode"
      @contextmenu.stop="showNodeContextMenu"
    >
      <span class="lane-text">{{ node.nodeName }}</span>
    </div>
  </div>

  <div
    v-else-if="node.type == 'y-lane'"
    :id="node.id"
    class="common-y-lane-node"
    :class="{ active: isActive() }"
    :style="{
      top: node.y + 'px',
      left: node.x + 'px',
      height: node.height + 'px',
      width: node.width + 'px',
      cursor:
        currentTool.type == 'zoom-in'
          ? 'zoom-in'
          : currentTool.type == 'zoom-out'
          ? 'zoom-out'
          : 'default',
    }"
  >
    <div
      class="lane-text-div"
      :style="{ cursor: currentTool.type == 'drag' ? 'move' : 'default' }"
      @click.stop="selectNode"
      @contextmenu.stop="showNodeContextMenu"
    >
      <span class="lane-text">{{ node.nodeName }}</span>
    </div>
  </div>

  <div v-else></div>
</template>

<script>
import jsplumb from 'jsplumb'
import { flowConfig } from '@/utils/args-config.js'
import $ from 'jquery'
import 'jquery-ui/ui/widgets/draggable'
import 'jquery-ui/ui/widgets/droppable'
import 'jquery-ui/ui/widgets/resizable'

export default {
  props: ['select', 'selectGroup', 'node', 'plumb', 'currentTool'],
  components: {
    jsplumb
  },
  mounted () {
    this.registerNode()
  },
  data () {
    return {
      currentSelect: this.select,
      currentSelectGroup: this.selectGroup
    }
  },
  methods: {
    // 初始化节点域
    registerNode () {
      this.plumb.draggable(this.node.id, {
        containment: 'parent',
        handle: (e, el) => {
          var possibles = el.parentNode.querySelectorAll(
            '.common-circle-node,.common-rectangle-node,.common-diamond-node,.lane-text-div'
          )
          for (var i = 0; i < possibles.length; i++) {
            if (possibles[i] === el || e.target.className === 'lane-text') { return true }
          }
          return false
        },
        grid: flowConfig.defaultStyle.alignGridPX,
        drag: (e) => {
          if (flowConfig.defaultStyle.isOpenAuxiliaryLine) {
            this.$emit('alignForLine', e)
          }
        },
        stop: (e) => {
          this.node.x = e.pos[0]
          this.node.y = e.pos[1]
          if (this.currentSelectGroup.length > 1) {
            this.$emit('updateNodePos')
          }
          this.$emit('hideAlignLine')
        }
      })

      if (this.node.type === 'x-lane' || this.node.type === 'y-lane') {
        $('#' + this.node.id).resizable({
          minHeight: 200,
          minWidth: 200,
          maxHeight: 2000,
          maxWidth: 2000,
          ghost: true,
          autoHide: true,
          stop: (event, ui) => {
            this.node.height = ui.size.height
            this.node.width = ui.size.width
          }
        })
      }
      this.currentSelect = this.node
      this.currentSelectGroup = []
    },
    selectNode () {
      this.currentSelect = this.node
      this.$emit('isMultiple', (flag) => {
        if (!flag) {
          this.currentSelectGroup = []
        } else {
          let f = this.currentSelectGroup.filter((s) => s.id === this.node.id)
          if (f.length <= 0) {
            this.plumb.addToDragSelection(this.node.id)
            this.currentSelectGroup.push(this.node)
          }
        }
      })
    },
    showNodeContextMenu (e) {
      this.$emit('showNodeContextMenu', e)
      this.selectNode()
    },
    isActive () {
      if (this.currentSelect.id === this.node.id) return true
      let f = this.currentSelectGroup.filter((n) => n.id === this.node.id)
      if (f.length > 0) return true
      return false
    }
  },
  watch: {
    select (val) {
      this.currentSelect = val
    },
    currentSelect: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true
    },
    selectGroup (val) {
      this.currentSelectGroup = val
    },
    currentSelectGroup: {
      handler (val) {
        this.$emit('update:selectGroup', val)
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../static/less/flow-node.less";
</style>
